/**
 * Created by huzhihui on 2017/9/18.
 */
import React from "react";
import {connect} from "dva";
import {Link} from "dva/router";
import "./index.css";
import logo from "../../logo.svg";
import {Col, Layout, Menu, Row} from "antd";
const {Header, Content, Footer} = Layout;

const Api = (props) => {
    const {dispatch, api} = props;
    return (
        <Layout className="layout">
            <Header className="header">
                <Row>
                    <Col xs={0} sm={12} md={12} lg={12} xl={12}>
                        <img src={logo} alt="" className="App-logo"/>
                    </Col>
                    <Col xs={24} sm={0} md={0} lg={0} xl={0}>
                        <div style={{textAlign: 'center'}}>
                            <img src={logo} alt="" className="App-logo"/>
                        </div>
                    </Col>
                    <Col xs={0} sm={12} md={12} lg={12} xl={12}>
                        <h3>
                            AIBTON FRAMEWORK
                        </h3>
                    </Col>
                </Row>
            </Header>
            <Content style={{padding: '24px 48px'}}>
                <div style={{background: '#fff', padding: '24px 0 0', minHeight: 340}}>
                    <Row>
                        <Col className="" xs={24} sm={12} md={6} lg={4} xl={4}>
                            <Menu
                                defaultSelectedKeys={api.defaultSelectedKeys}
                                selectedKeys={api.defaultSelectedKeys}
                                mode='inline'
                                theme='light'
                            >
                                <Menu.Item key="1" style={{paddingLeft: '24px'}}>
                                    <Link to="/api/introduction">
                                        系统简介
                                    </Link>
                                </Menu.Item>
                                <Menu.Item key="2" style={{paddingLeft: '24px'}}>
                                    <Link to="/api/configuration">
                                        基础配置
                                    </Link>
                                </Menu.Item>
                                <Menu.Item key="3" style={{paddingLeft: '24px'}}>
                                    <Link to="/api/quickStart">
                                        快速开始
                                    </Link>
                                </Menu.Item>
                                <Menu.Item key="4" style={{paddingLeft: '24px'}}>
                                    <Link to="/api/aboutUs">
                                        关于我们
                                    </Link>
                                </Menu.Item>
                            </Menu>
                        </Col>
                        <Col className="api-container" xs={24} sm={12} md={18} lg={20} xl={20}>
                            {props.children}
                        </Col>
                    </Row>
                </div>
            </Content>
            <Footer style={{textAlign: 'center'}}>
                Aibton framework ©2016 Created by Aibton
            </Footer>
        </Layout>
    );
}
export default connect(({api}) => ({
    api
}))(Api);